<template>
  <div class="product-list">
    <van-grid :column-num="2" :center="false" :gutter="10" :border="false">
      <van-grid-item v-for="item in productsData" :key="item.id"
      :to="{
        name: 'product',
        params: {
          productId: item.id
        }
      }">
        <van-image :src="item.image" />
        <p class="title" v-text="item.store_name"></p>
        <p class="price">¥{{ item.price }}</p>
        <p class="sales">已销售{{item.sales}}件</p>
      </van-grid-item>
    </van-grid>
  </div>
</template>
<script setup>
  import { Grid as VanGrid, GridItem as VanGridItem, Image as VanImage } from 'vant'
// const props = defineProps({})  props.productsData
// 接受父组件传递的数据,并解构使用
const { productsData } = defineProps({
  productsData: {
    type: Array,
    required: true
  }
}) 
</script>

<style lang='scss' scoped>
.product-list{
  margin-top: 10px;
}
:deep(.van-grid-item__content) {
  border-radius: 20px;
  overflow: hidden;
  padding: 0;
  margin-bottom: 6px;
  .title{
    font-size: 15px;
    padding: 10px 6px 0;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient:vertical;
    overflow: hidden;
  }
  .price{
    color:#ee3e3e;
    font-size: 22px;
    font-weight: 700;
    padding-left: 8px;
  }
  .sales{
    color: #999;
    font-size: 16px;
    padding-left: 12px;
  }
}
</style>
